import { LitElement, html, css } from 'https://assets.kiipu.com/libs/lit/3.1.3/lit-all.min.js';
import 'https://assets.kiipu.com/libs/card-ui/0.0.8/all.min.js';
import { stylesString } from './styles.js';

export class KpCommon extends LitElement {
  static styles = [
    css([stylesString])
  ];

  static properties = {
    preview: { type: Boolean },
    title: { type: String },
    url: { type: String },
    image: { type: String },
    description: { type: String },
    _urlNoWrap: {state: true},
  }

  constructor() {
    super();
    this.preview = false;
    this.title = '';
    this.url = '';
    this.image = '';
    this.description = '';
  }

  willUpdate(changed) {
    if (changed.has('url')) {
      this._urlNoWrap = true;
    }
  }

  render() {
    return html`
      <div class="root">
        <kpc-link class="title" href="${this.url}" ?preview="${this.preview}" variant="title" color="primary">${this.title}</kpc-link>
        <kpc-typography class="url" variant="body2" color="secondary" ?nowrap="${this._urlNoWrap}" @click="${() => {this._urlNoWrap = false}}">${this.url}</kpc-typography>
        ${this.image && html`<kpc-picture class="picture" src="${this.image}" href="${this.url}" ?preview="${this.preview}" />`}
        ${this.description && html`<kpc-typography>${this.description}</kpc-typography>`}
      </div>
    `;
  }
}

window.customElements.define('TAG_NAME', KpCommon);
